<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <!-- <div ref="myDiv" class="radar-echart"> -->
  <div class="box-container">
    <div ref="myDiv" class="radar-echart"></div>
  </div>
</template>

<script>
// 完成加载过程
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/line') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { ToolboxComponent } from 'echarts/components'
echarts.use([ToolboxComponent])
export default {
  props: {
    tdata: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      data: [200, 932, 200, 500, 700, 1000, 1100, 500, 688, 100, 156, 500]
    }
  },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.tdata ? this.tdata : this.data,
          type: 'line',
          smooth: true
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
.box-container {
  width: 850px;
  height: 400px;
  overflow: hidden;
  .radar-echart {
    width: 850px;
    margin-left: -20px;
    height: 400px;
  }
}
</style>
